
//创建一级标题
import React from 'react'

//1.引入ant标签
import { Tabs, Badge } from 'antd-mobile'

//3.引入本身的less样式
import './IndexShop.less'

//4.引入环境变量展示图片
import { $pre } from '../../../../http/http'

//3.引入路由实现页面跳转 withRouter伴随路由,可以让非路由组件实现页面的跳转
import { Link, withRouter } from 'react-router-dom'


//2.向外暴露Cate组件
function Cate(props) {

    //接收父组件传递过来的cate列表数据
    let { indexShop, arr, changeN, n } = props
    //输出n
    console.log(n);

    return (
        <div className='indexShop'>
            <h1>首页商品列表</h1>
            <ul className='title'>
                {arr.map((item, index) => {
                    return (
                        <li onClick={() => changeN(index)
                        } className={index == n ? 'active' : 'Titem'} key={index}>{item.title}</li>
                    )
                })}
            </ul>
            {/* 这里输出的indexShop是一个数组,数组里面返回了4个对象,每个对象里面又分别有很多数组,所以需要用到双重for循环 类似于有没有childred的案例只不过这里变成了判断content */}
            {indexShop.map((item, index) => {
                return (//3.map遍历cate中的名字 组成新数组展示
                    <div title={item} key={index}>
                        {item.content ? ( //判断如果有content的时候再对content进行遍历
                            <ol>
                                {index == n ? (<div >
                                    {item.content.map(i => {
                                        return <li className='shopItem' key={i.id} onClick={() => props.history.push('/detail/'+i.id)}>
                                            <img src={$pre + i.img} alt="" />
                                            <div className='right'>
                                                <h2>{i.goodsname}</h2>
                                                <p>{i.price}</p>
                                                <div className='iconfont' onClick={(e) => {
                                                    //阻止冒泡
                                                    e.stopPropagation()
                                                    props.history.push('/shop/'+i.id)
                                                }}> 加入购物车</div>
                                            </div>
                                        </li>
                                    })}
                                </div>) : (null)}
                            </ol>
                        ) : (
                                <div>暂无数据</div>
                            )}
                    </div>
                )
            })}
        </div>
    )
}

export default withRouter(Cate)

